/* 商品卡片容器 - 使用Flex布局实现图文左右排列
Product Card Container - Flex layout for left-content right-image */
.product-card {
    display: flex; /* 启用弹性盒子布局 */
    gap: 20px; /* 元素间距 */
    margin: 15px 0; /* 上下边距 */
    padding: 20px; /* 内边距 */
    background: #fff; /* 白色背景 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 阴影效果 */
    flex: 0 0 calc(50% - 10px); /* 每个卡片占据容器宽度的一半减去间距 */
    box-sizing: border-box; /* 确保内边距和边框包含在宽度内 */
}

/* 文字内容区域 - 占60%宽度
Content Area - 60% width */
.product-content {
    flex: 0 0 40%; /* 固定60%宽度 */
}

/* 商品图片样式
Product Image Style */
.product-image {
    flex: 1; /* 剩余空间填充 */
    max-width: 300px; /* 最大宽度限制 */
    height: 200px; /* 固定高度 */
    object-fit: cover; /* 图片填充方式 */
    border-radius: 4px; /* 轻微圆角 */
}

/* 商品容器布局
Product Container Layout */
#product-container {
    max-width: 1200px; /* 最大内容宽度 */
    margin: 30px 0; /* 居中显示 */
    padding: 0 20px; /* 左右内边距 */
    display: flex; /* 启用弹性布局 */
    flex-wrap: wrap; /* 允许换行 */
    gap: 20px; /* 卡片之间的间距 */
}
